<template>
  <div class="page-box">
    <div class="left-menu">
      <template v-for="(item, index) in categoryList" :key="index">
        <div class="category-item" @click="moveTo(item.id)">
          {{ item.name }}
        </div>
      </template>
    </div>
    <div class="right-list" ref="rightListRef" :style="submitForm.length ? 'height: calc(100% - 60px)' : ''">
      <template v-for="(item, index) in goodsList" :key="index">
        <div class="goods-item">
          <div class="goods-img">
            <img :src="item.url" />
          </div>
          <div class="goods-info">
            <div class="goods-title">
              {{ item.name }}
            </div>
            <div class="goods-desc">
              {{ item.description }}
            </div>
            <div class="price-box">
              <div class="goods-price">
                <span>￥</span>
                <span>{{ (item.price / 100).toFixed(2) }}</span>
                <span>元</span>
              </div>
              <div class="num">
                <el-input-number
                  v-model="item.num"
                  size="small"
                  style="width: 100px"
                  width="100px"
                  :min="0"
                  :max="99"
                  @change="handleChange(item)"
                />
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="settle-box" v-if="submitForm.length">
      <div>
        <span>总计</span>
        <span>￥</span>
        <span>{{ (sumPrice / 100).toFixed(2) }}</span>
      </div>
      <el-button type="primary" @click="toSettle"> 去结算</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getGoodsList } from "@/api/modules/mobile";
import { computed } from "vue";

const categoryList = ref<any[]>([
  {
    id: 1,
    name: "推荐"
  },
  {
    id: 2,
    name: "荤菜"
  },
  {
    id: 3,
    name: "素菜"
  },
  {
    id: 4,
    name: "饮品"
  },
  {
    id: 5,
    name: "酒水"
  },
  {
    id: 6,
    name: "甜品"
  },
  {
    id: 7,
    name: "主食"
  },
  {
    id: 8,
    name: "其他"
  }
]);

const rightListRef = ref<any>();

const goodsList = ref<any[]>([]);

const submitForm = ref<any[]>([]);

const sumPrice = computed(() => {
  return submitForm.value.reduce((acc, curr) => {
    return (acc = acc + curr.price * curr.num);
  }, 0);
});

onMounted(async () => {
  console.log("getgoods");
  const { data } = await getGoodsList({
    pageIndex: 1,
    pageSize: 99
  });
  if (data) {
    const list = data.list.sort((a, b) => {
      return a.categoryId - b.categoryId;
    });
    list.forEach(item => {
      item.num = 0;
    });
    goodsList.value = JSON.parse(JSON.stringify(list));
  }
});

const moveTo = id => {
  console.log("moveto", id);
  const topIndex = goodsList.value.findIndex(item => item.categoryId === id);
  rightListRef.value.scrollTop = topIndex * 105;
};

const handleChange = params => {
  const currentItem = submitForm.value.find(item => item.id === params.id);
  if (!currentItem) {
    submitForm.value.push(params);
  } else {
    currentItem.num = params.num;
  }
};

const toSettle = () => {
  // todo
  console.log("tosettle");
};
</script>
<style lang="scss" scoped>
.page-box {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  .left-menu {
    width: 80px;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid #333333;
    .category-item {
      width: calc(100% - 24px);
      padding: 12px;
      border-bottom: 1px solid #333333;
    }
  }
  .right-list {
    width: calc(100% - 81px);
    height: 100%;
    overflow-y: auto;
    .goods-item {
      display: flex;
      width: calc(100% - 24px);
      height: 80px;
      padding: 12px;
      border-bottom: 1px solid #eeeeee;
      .goods-img {
        width: 60px;
        height: 60px;
        margin-top: 12px;
        background-color: #eeeeee;
      }
      .goods-info {
        width: calc(100% - 60px);
        padding-left: 8px;
        .goods-title {
          font-size: 14px;
        }
        .goods-desc {
          display: -webkit-box;
          height: 32px;
          overflow: hidden;
          font-size: 12px;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2; /* 显示两行 */
          -webkit-box-orient: vertical;
        }
        .price-box {
          display: flex;
          justify-content: space-between;
          width: 100%;
          .goods-price {
            font-size: 14px;
          }
          .num {
            width: 100px;
          }
        }
      }
    }
  }
  .settle-box {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 24px);
    height: 40px;
    padding: 12px;
    background-color: #ffffff;
    border-top: 1px solid #333333;
  }
}
</style>
